<template>
  <div class="app-container">
    <div class="Aline1">
      <el-radio-group v-model="radio">
        <el-radio :value="3">近24小时</el-radio>
        <el-radio :value="6">近7日</el-radio>
        <el-radio :value="9">近30日</el-radio>
        <el-radio :value="12">自定义</el-radio>
      </el-radio-group>
    </div>
    <div class="Aline2">
      <div class="Bcolumn1">
        <div class="Ccolumn1">
          <div ref="pieChartRef1" style="width: 100%; height: 100%"></div>
        </div>
        <div class="Ccolumn1">
          <div class="Dline1">
            <div class="Ecolumn1">
              <el-text>设备通讯：</el-text>
            </div>
            <div class="Ecolumn2">
              <div
                ref="lineChartRef1"
                style="width: 110%; height: 100%; transform: translate(-8%, 0)"
              ></div>
            </div>
          </div>
          <div class="Dline1">
            <div class="Ecolumn1">
              <el-text>采集终端通讯：</el-text>
            </div>
            <div class="Ecolumn2">
              <div
                ref="lineChartRef2"
                style="width: 110%; height: 100%; transform: translate(-8%, 0)"
              ></div>
            </div>
          </div>
          <div class="Dline1">
            <div class="Ecolumn1">
              <el-text>采集点异常：</el-text>
            </div>
            <div class="Ecolumn2">
              <div
                ref="lineChartRef3"
                style="width: 110%; height: 100%; transform: translate(-8%, 0)"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="Bcolumn2">
        <div class="Ccolumn1">
          <div ref="pieChartRef1AAA" style="width: 100%; height: 100%"></div>
        </div>
        <div class="Ccolumn1">
          <div class="Dline1">
            <div class="Ecolumn1">
              <el-text>设备通讯：</el-text>
            </div>
            <div class="Ecolumn2">
              <div
                ref="lineChartRef1AAA"
                style="width: 110%; height: 100%; transform: translate(-8%, 0)"
              ></div>
            </div>
          </div>
          <div class="Dline1">
            <div class="Ecolumn1">
              <el-text>采集终端通讯：</el-text>
            </div>
            <div class="Ecolumn2">
              <div
                ref="lineChartRef2AAA"
                style="width: 110%; height: 100%; transform: translate(-8%, 0)"
              ></div>
            </div>
          </div>
          <div class="Dline1">
            <div class="Ecolumn1">
              <el-text>采集点异常：</el-text>
            </div>
            <div class="Ecolumn2">
              <div
                ref="lineChartRef3AAA"
                style="width: 110%; height: 100%; transform: translate(-8%, 0)"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Aline3">
      <el-tabs
        v-model="tabsListID"
        @tab-click="tabsToGetList"
        type="card"
        style="margin-top: 1%"
      >
        <el-tab-pane
          v-for="item in tabsList"
          :key="item.id"
          :label="item.name"
          :name="item.id"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="Aline4">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="YYYYYList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="采集终端" align="center" prop="AAA" />
        <el-table-column label="安装地址" align="center" prop="BBB" />
        <el-table-column label="中断时间" align="center" prop="CCC" />
        <el-table-column label="中断时长" align="center" prop="DDD" />
        <el-table-column label="恢复时间" align="center" prop="EEE" />
        <el-table-column label="报警等级" align="center" prop="FFF" />
        <el-table-column label="状态" align="center" prop="stateResult">
          <template #default="scope">
            <div :style="scope.row.stateStyle">{{ scope.row.stateResult }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['ruoyi-device:YYYYY:edit']"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['ruoyi-device:YYYYY:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form ref="YYYYYRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="采集终端" prop="AAA">
            <el-input v-model="form.AAA" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="安装地址" prop="BBB">
            <el-input v-model="form.BBB" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="中断时间" prop="CCC">
            <el-input v-model="form.CCC" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="中断时长" prop="DDD">
            <el-input v-model="form.DDD" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="恢复时间" prop="EEE">
            <el-input v-model="form.EEE" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="报警等级" prop="FFF">
            <el-input v-model="form.FFF" placeholder="请输入名称" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<style scoped lang="scss">
.app-container {
  height: 85vh;
  width: 100%;
  .Aline1 {
    height: 5%;
    width: 100%;
  }
  .Aline2 {
    border-width: 1px;
    border-top-style: solid;
    height: 40%;
    width: 100%;
    display: flex;
    .Bcolumn1 {
      width: 50%;
      height: 100%;
      display: flex;
      border-width: 1px;
      border-right-style: solid;
    }
    .Bcolumn2 {
      width: 50%;
      height: 100%;
      display: flex;
    }
    .Ccolumn1 {
      width: 50%;
      height: 100%;
      .Dline1 {
        height: 33.3%;
        width: 100%;
        display: flex;
        .Ecolumn1 {
          width: 30%;
          height: 100%;
          transform: translate(20%, 35%);
        }
        .Ecolumn2 {
          width: 70%;
          height: 100%;
        }
      }
    }
  }
  .Aline3 {
    border-width: 1px;
    border-top-style: solid;
    height: 10%;
    width: 100%;
  }
  .Aline4 {
    height: 45%;
    width: 100%;
  }
}
</style>
<script setup>
const tabsList = ref([
  { id: 0, name: "设备通讯" },
  { id: 1, name: "采集终端通讯" },
  { id: 2, name: "采集点异常" },
]);
const tabsListID = ref(0);

function tabsToGetList(pane) {
  let id = pane.props.name;
  let item = {};
  tabsList.value.forEach((item1) => {
    if (item1.id == id) {
      item = item1;
    }
  });
  console.log(item);
}

const radio = ref(3);
import { watch } from "vue";
watch(radio, (newValue, oldValue) => {
  console.log(newValue);
});

import * as echarts from "echarts";
const lineChartRef3AAA = ref(null);
onMounted(() => {
  createlineChart3AAA([""], [70], [20], [10]);
});
function createlineChart3AAA(name, data1, data2, data3) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef3AAA.value);
  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: name,
    },
    series: [
      {
        name: "一般",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data1,
        itemStyle: {
          normal: {
            color: "#172BE2FF",
          },
        },
      },
      {
        name: "严重",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data2,
        itemStyle: {
          normal: {
            color: "#F1B51FFF",
          },
        },
      },
      {
        name: "紧急",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data3,
        itemStyle: {
          normal: {
            color: "#F11C1CFF",
          },
        },
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}
const lineChartRef2AAA = ref(null);
onMounted(() => {
  createlineChart2AAA([""], [70], [20], [10]);
});
function createlineChart2AAA(name, data1, data2, data3) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef2AAA.value);
  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: name,
    },
    series: [
      {
        name: "一般",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data1,
        itemStyle: {
          normal: {
            color: "#172BE2FF",
          },
        },
      },
      {
        name: "严重",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data2,
        itemStyle: {
          normal: {
            color: "#F1B51FFF",
          },
        },
      },
      {
        name: "紧急",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data3,
        itemStyle: {
          normal: {
            color: "#F11C1CFF",
          },
        },
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}
const lineChartRef1AAA = ref(null);
onMounted(() => {
  createlineChart1AAA([""], [70], [20], [10]);
});
function createlineChart1AAA(name, data1, data2, data3) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef1AAA.value);
  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: name,
    },
    series: [
      {
        name: "一般",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data1,
        itemStyle: {
          normal: {
            color: "#172BE2FF",
          },
        },
      },
      {
        name: "严重",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data2,
        itemStyle: {
          normal: {
            color: "#F1B51FFF",
          },
        },
      },
      {
        name: "紧急",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data3,
        itemStyle: {
          normal: {
            color: "#F11C1CFF",
          },
        },
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}
onMounted(() => {
  let dataList = [
    {
      name: "一般",
      value: 70,
    },
    {
      name: "严重",
      value: 20,
    },
    {
      name: "紧急",
      value: 10,
    },
  ];
  let colorList = [
    ["#172BE2FF", "#6585FBFF"],
    ["#F1B51FFF", "#EFBF59FF"],
    ["#F11C1CFF", "#F36565FF"],
  ];
  createPieChart1AAA(dataList, colorList, 100);
});
const pieChartRef1AAA = ref(null);
function createPieChart1AAA(dataList, colorList, total) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(pieChartRef1AAA.value);

  // 设置图表的配置项和数据
  const option = {
    title: {
      show: "true", //是否显示标题，默认显示，可以不设置
      text: "未处理报警",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
      top: "60%",
    },
    series: [
      {
        name: "告警统计",
        type: "pie",
        radius: ["60%", "80%"], // 设置饼图大小
        center: ["50%", "50%"],
        minAngle: 5, //最小角度
        startAngle: 0,
        endAngle: 360,
        // labelLine: {
        //   //删除指示线
        //   show: false,
        // },
        data: dataList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        itemStyle: {
          normal: {
            color: function (params) {
              var index = params.dataIndex;
              // 颜色渐变函数 前四个参数分别表示四个位置依次为
              // 右下左上
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colorList[index][0],
                },
                {
                  offset: 1,
                  color: colorList[index][1],
                },
              ]);
            },
          },
        },
      },
    ],
    graphic: [
      {
        type: "group",
        left: "center",
        top: "40%",
        children: [
          {
            type: "text",
            left: "center",
            top: 0,
            style: {
              text: total,
              width: 23,
              height: 24,
              fontFamily: "DIN1451EF EngNeu",
              fontWeight: 400,
              fontSize: 33,
              fill: "#218CFF",
              lineHeight: 21,
              // 让背景应用到文字上
              backgroundClip: "text",
              textFill: "transparent",
              align: "center",
            },
          },
          {
            type: "text",
            top: 30,
            left: -10,
            style: {
              text: "总数",
              width: 10,
              height: 11,
              fontFamily: "FZCuYuan-M03S",
              fontSize: 13,
              fill: "#218CFF",
              lineHeight: 21,
            },
          },
        ],
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}
const lineChartRef3 = ref(null);
onMounted(() => {
  createlineChart3([""], [70], [20], [10]);
});
function createlineChart3(name, data1, data2, data3) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef3.value);
  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: name,
    },
    series: [
      {
        name: "一般",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data1,
        itemStyle: {
          normal: {
            color: "#172BE2FF",
          },
        },
      },
      {
        name: "严重",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data2,
        itemStyle: {
          normal: {
            color: "#F1B51FFF",
          },
        },
      },
      {
        name: "紧急",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data3,
        itemStyle: {
          normal: {
            color: "#F11C1CFF",
          },
        },
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}
const lineChartRef2 = ref(null);
onMounted(() => {
  createlineChart2([""], [70], [20], [10]);
});
function createlineChart2(name, data1, data2, data3) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef2.value);
  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: name,
    },
    series: [
      {
        name: "一般",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data1,
        itemStyle: {
          normal: {
            color: "#172BE2FF",
          },
        },
      },
      {
        name: "严重",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data2,
        itemStyle: {
          normal: {
            color: "#F1B51FFF",
          },
        },
      },
      {
        name: "紧急",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data3,
        itemStyle: {
          normal: {
            color: "#F11C1CFF",
          },
        },
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}
const lineChartRef1 = ref(null);
onMounted(() => {
  createlineChart1([""], [70], [20], [10]);
});
function createlineChart1(name, data1, data2, data3) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef1.value);
  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: name,
    },
    series: [
      {
        name: "一般",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data1,
        itemStyle: {
          normal: {
            color: "#172BE2FF",
          },
        },
      },
      {
        name: "严重",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data2,
        itemStyle: {
          normal: {
            color: "#F1B51FFF",
          },
        },
      },
      {
        name: "紧急",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data3,
        itemStyle: {
          normal: {
            color: "#F11C1CFF",
          },
        },
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}
onMounted(() => {
  let dataList = [
    {
      name: "一般",
      value: 70,
    },
    {
      name: "严重",
      value: 20,
    },
    {
      name: "紧急",
      value: 10,
    },
  ];
  let colorList = [
    ["#172BE2FF", "#6585FBFF"],
    ["#F1B51FFF", "#EFBF59FF"],
    ["#F11C1CFF", "#F36565FF"],
  ];
  createPieChart1(dataList, colorList, 100);
});
const pieChartRef1 = ref(null);
function createPieChart1(dataList, colorList, total) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(pieChartRef1.value);

  // 设置图表的配置项和数据
  const option = {
    title: {
      show: "true", //是否显示标题，默认显示，可以不设置
      text: "全部报警",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
      top: "60%",
    },
    series: [
      {
        name: "告警统计",
        type: "pie",
        radius: ["60%", "80%"], // 设置饼图大小
        center: ["50%", "50%"],
        minAngle: 5, //最小角度
        startAngle: 0,
        endAngle: 360,
        // labelLine: {
        //   //删除指示线
        //   show: false,
        // },
        data: dataList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        itemStyle: {
          normal: {
            color: function (params) {
              var index = params.dataIndex;
              // 颜色渐变函数 前四个参数分别表示四个位置依次为
              // 右下左上
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colorList[index][0],
                },
                {
                  offset: 1,
                  color: colorList[index][1],
                },
              ]);
            },
          },
        },
      },
    ],
    graphic: [
      {
        type: "group",
        left: "center",
        top: "40%",
        children: [
          {
            type: "text",
            left: "center",
            top: 0,
            style: {
              text: total,
              width: 23,
              height: 24,
              fontFamily: "DIN1451EF EngNeu",
              fontWeight: 400,
              fontSize: 33,
              fill: "#218CFF",
              lineHeight: 21,
              // 让背景应用到文字上
              backgroundClip: "text",
              textFill: "transparent",
              align: "center",
            },
          },
          {
            type: "text",
            top: 30,
            left: -10,
            style: {
              text: "总数",
              width: 10,
              height: 11,
              fontFamily: "FZCuYuan-M03S",
              fontSize: 13,
              fill: "#218CFF",
              lineHeight: 21,
            },
          },
        ],
      },
    ],
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}

const { proxy } = getCurrentInstance();
import { onMounted } from "vue";
// import {
//   listXXXXX,
//   getXXXXX,
//   delXXXXX,
//   addXXXXX,
//   updateXXXXX,
// } from "@/api/ruoyi-device/YYYYY";

const YYYYYList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

onMounted(() => {
  getList();
});
/** 查询操作列表 */
function getList() {
  loading.value = true;
  // listXXXXX(queryParams.value).then((response) => {
  //   YYYYYList.value = response.rows;
  //   total.value = response.total;
  //   loading.value = false;
  // });
  loading.value = false;
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    name: null,
    state: null,
    remark: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    createBy: null,
    delFlag: null,
  };
  proxy.resetForm("YYYYYRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加操作";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getXXXXX(_id).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "修改操作";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["YYYYYRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateXXXXX(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addXXXXX(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除编号为"' + _ids + '"的数据项？')
    .then(function () {
      return delXXXXX(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "ruoyi-device/YYYYY/export",
    {
      ...queryParams.value,
    },
    `YYYYY_${new Date().getTime()}.xlsx`
  );
}
</script>
